<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>1002@test</title>
    <style type="text/css">
        #connect-container {
            float: left;
            width: 500px
        }

        #connect-container div {
            padding: 5px;
        }

        #console-container {
            float: left;
            margin-left: 100px;
            width: 400px;
        }

        #console {
            border: 1px solid #CCCCCC;
            border-right-color: #999999;
            border-bottom-color: #999999;
            height: 380px;
            width: 900px;
            overflow-y: scroll;
            padding: 5px;
        }

        #console p {
            padding: 0;
            margin: 0;
        }
    </style>
    <script type="application/javascript">

        var socket = null;
        var token = '5c6e2fef46f6942bc1e54e22126a3598eeb96c7909448e3e2a22cec6dded438a';

        function init() {
            var obj = document.getElementById('ws');
            obj.value = "ws://" + window.location.hostname + ":7250/ws?token=" + token;
        }

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;

            if (connected) {
                echo(document.getElementById('loginText').value);
            }
        }

        function connect() {
            var target = document.getElementById('ws').value;
            log('websocket url:' + target);
            if (target == '') {
                alert('Please select server side connection implementation.');
                return;
            }

            if (window.WebSocket) {
                socket = new WebSocket(target);
                socket.onmessage = function (event) {
                    log('Received: ' + event.data);
                };
                var timer;
                socket.onopen = function (event) {
                    log('Info: WebSocket connection opened.');
                    var pingTime = 10 * 1000;
                    setConnected(true);
                    timer = window.setInterval(function () {
                        var ping = "{'cmd':'ping' , 'sequence': " + new Date().getTime() + " }";
                        socket.send(ping);
                    }, pingTime);
                };
                socket.onclose = function (event) {
                    setConnected(false);
                    clearInterval(timer);
                    log('Info: WebSocket connection closed, Code: ' + event.code + (event.reason == "" ? "" : ", Reason: " + event.reason));
                };
            } else {
                alert("您的浏览器不支持WebSocket协议！");
            }
        }

        function disconnect() {
            if (socket != null) {
                var message = '{ "cmd":"LOGOUT", "sequence":1604584634704}';
                socket.send(message);
            }
            setConnected(false);
        }

        function echo(message) {
            if (socket != null) {
                log('Sent: ' + message);
                socket.send(message);
            } else {
                alert('WebSocket connection not established, please connect.');
            }
        }

        function echoCmd(message, cmd) {
            var obj = JSON.parse(message);
            obj["cmd"] = cmd;
            if (socket != null) {
                log('Sent: ' + JSON.stringify(obj));
                socket.send(JSON.stringify(obj));
            } else {
                alert('WebSocket connection not established, please connect.');
            }
        }

        function log(message) {
            if (message.indexOf('pong') != -1) {
                return;
            }


            var console = document.getElementById('console');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            console.appendChild(p);
            while (console.childNodes.length > 30) {
                console.removeChild(console.firstChild);
            }
            console.scrollTop = console.scrollHeight;
        }

        function clearConsole() {
            var console = document.getElementById('console');
            while (console.childNodes.length > 0) {
                console.removeChild(console.firstChild);
            }
        }


        document.addEventListener("DOMContentLoaded", function () {
            // Remove elements with "noscript" class - <noscript> is not allowed in XHTML
            var noscripts = document.getElementsByClassName("noscript");
            for (var i = 0; i < noscripts.length; i++) {
                noscripts[i].parentNode.removeChild(noscripts[i]);
            }
        }, false);
    </script>
</head>
<body onload="init()">
<div class="noscript"><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets rely on
    Javascript being enabled. Please enable
    Javascript and reload this page!</h2></div>
<div>
    <div id="connect-container">
        <input id="callId" value="" type="hidden" size="40" style="width: 500px"/>

        <div>
            <input id="ws" value="" type="text" size="40" style="width: 500px"/>
        </div>
        <div>
            <button id="connect" onclick="connect();">Connect</button>
            <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
        </div>
        <div hidden="hidden">
            <textarea id="loginText" style="width: 500px;height:30px">{"cmd":"LOGIN","loginType":"1","workType":"1","agentKey":"1002@test","time":"123456789"}</textarea>
        </div>

        <div>
            <textarea id="READY_Text" hidden="hidden">{"cmd":"READY","sequence":1604584634704}</textarea>
        </div>
        <div>
            <button id="READY" onclick=echo("{'cmd':'READY','sequence':'1604584634704'}")> READY</button>
            <button id="NOT_READY" onclick=echo("{'cmd':'NOT_READY','sequence':'1604584634704'}")> NOT_READY</button>
            <button id="ANSWER" onclick=echo("{'cmd':'ANSWER'}")> 应答</button>
            <button id="HANGUP_CALL" onclick=echo("{'cmd':'HANGUP_CALL'}")> 挂机</button>
        </div>

        <div>
            <textarea id="calloutText" style="width: 500px;height: 55px">{ "cmd":"MAKE_CALL", "display":"", "called":"13300001234", "callType":"OUTBOUNT_CALL", "followData":{"autoAnswer":"true"},"uuid1":"123456"}</textarea>
        </div>
        <div>
            <button id="callout" onclick="echo(document.getElementById('calloutText').value);"> 外呼</button>
        </div>
        </br>

        <div>
            <button id="audioReadMute" onclick=echo("{'cmd':'AUDIO_READ_MUTE'}")>静音</button>
            <button id="audioStop" onclick=echo("{'cmd':'AUDIO_STOP'}")>取消静音</button>
            <button id="hold" onclick=echo("{'cmd':'HOLD'}")>保持</button>
            <button id="cancelHold" onclick=echo("{'cmd':'HOLD_CANCEL'}")>取消保持</button>
        </div>

        <div>
            <textarea id="consultText" style="width: 500px;height: 30px">{ "cmd":"CONSULT", "type":2, "consultValue":"1002@test", "sequence":1604584634704}</textarea>
        </div>
        <div>
            <button id="consult" onclick="echo(document.getElementById('consultText').value);"> 咨询</button>
            <button id="consultCancel" onclick=echo("{'cmd':'CONSULT_CANCEL'}")> 取消咨询</button>
            <button id="consultToTransfer" onclick=echo("{'cmd':'CONSULT_TRANSFER'}")> 咨询转</button>
            <button id="consultStop" onclick=echo("{'cmd':'CONSULT_STOP'}")> 结束咨询</button>
            <button id="consultToParty" onclick=echo("{'cmd':'CONSULT_PARTY'}")> 转多方</button>
        </div>
        </br>

        <div>
            <textarea id="transferText" style="width: 500px;height: 30px">{ "cmd":"TRANSFER", "transferValue":"1002@test", "transferType":"1", "sequence":1604584634704}</textarea>
        </div>
        <div>
            <button id="transfer" onclick="echo(document.getElementById('transferText').value);"> 转接</button>
        </div>
        </br>

        <div> 班长监控:<br>
            <textarea id="monitor" style="width: 500px;height: 30px">{ "cmd":"MONITOR", "monitorAgent":"1002@test", "sequence":1604584634704}</textarea>
            <button id="insert" onclick="echoCmd(document.getElementById('monitor').value ,'INSERT');">强插</button>
            <button id="break" onclick="echoCmd(document.getElementById('monitor').value ,'BREAK');">强拆</button>
            <button id="listen" onclick="echoCmd(document.getElementById('monitor').value ,'LISTEN');">监听</button>
            <button id="whisp" onclick="echoCmd(document.getElementById('monitor').value , 'WHISPER');">耳语</button>
        </div>

        </br>
    </div>
    <div id="console-container">
        <div id="console"/>
    </div>

    <div>
        <button id="clearConsole" onclick="clearConsole();">clear message</button>
    </div>
</div>
</body>
</html>